<template>
  <div id="app">
    <b-modal id="modal-1" :title="alertTitle">
      <p class="my-4">{{alertContent}}</p>
    </b-modal>
    <logo-img></logo-img>
    <b-navbar toggleable="lg" type="light" variant="light" class="p-2 mt-0 mb-1 shadow-lg text-center">
      <b-navbar-brand href="#">
        <!--        <viewer :images="logo" class="d-inline">-->
        <b-img :src="logo" class="logo"></b-img>
        <!--        </viewer>-->
        <h1 class="d-inline">
          <router-link to="/">萧然技术博客</router-link>
        </h1>
      </b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item href="#jsjc">技术教程</b-nav-item>
          <b-nav-item href="#jsjc">踩坑笔记</b-nav-item>
          <b-nav-item href="#ruanjian">实用软件</b-nav-item>
          <b-nav-item href="#ym">源码下载</b-nav-item>
          <b-nav-item-dropdown text="联系萧然">
            <b-dropdown-item href="#" v-b-modal.modal-1 @click="showQQ">QQ</b-dropdown-item>
            <b-dropdown-item href="https://weibo.com/LZXIzj20">微博</b-dropdown-item>
            <b-dropdown-item href="#" disabled>微信公众号</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-input-group size="sm">
            <b-form-input placeholder="关键词" v-model="keyword"></b-form-input>
            <b-button variant="outline-info" size="sm" class="ml-1" @click="toSearch">搜索</b-button>
          </b-input-group>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <b-container class="">
      <b-row>
        <b-col lg="7" md="12" class="p-1 pt-lg-0 pb-lg-1 pl-lg-3 pr-lg-2">
          <b-carousel
            id="carousel-1"
            v-model="slide"
            :interval="4000"
            controls
            indicators
            background="#ababab"
            img-width="1024"
            img-height="480"
            style="text-shadow: 1px 1px 2px #333;"
            @sliding-start="onSlideStart"
            @sliding-end="onSlideEnd"
          >
            <!-- Text slides with image -->
            <b-carousel-slide
              :caption="item.title"
              :text="item.descr"
              :img-src="item.imgurl"
              v-for="(item,i) in adList" :key="i"></b-carousel-slide>
          </b-carousel>
          <articles title-name="前端开发" title-text="C" id="jsjc" :data="cid1data"></articles>
          <articles title-name="后端开发" title-text="J" :data="cid2data"></articles>
          <articles title-name="其他笔记" title-text="P" :data="cid5data"></articles>
          <articles1 title-name="软件下载" title-img="app.png" id="ruanjian" :data="cid3data"></articles1>
          <articles1 title-name="源码下载" title-img="yun.png" :data="cid4data" id="ym"></articles1>
        </b-col>
        <b-col lg="5" md="12" class="p-1 pt-lg-0 pb-lg-1 pl-lg-2 pr-lg-3">
          <article-intro :data="introdata" class="mt-1 d-none d-lg-block"></article-intro>
          <descr-title title-name="问题反馈" img-url="fk.png"></descr-title>
          <b-card header="邮件反馈" header-tag="header" bg-variant="white" header-text-variant="dark"
                  class="mt-md-2 mt-sm-2">
            <b-form-textarea
              id="textarea"
              v-model="fkData.content"
              placeholder="问题详情描述"
              rows="3"
              max-rows="6"
            ></b-form-textarea>
            <b-input-group class="mt-1">
              <b-input-group-prepend>
                <b-input-group-text>
                  <b-img :src="fkimg" class="titlefkimgkz"></b-img>
                </b-input-group-text>
              </b-input-group-prepend>
              <b-form-input placeholder="联系方式：手机号/邮箱" v-model="fkData.contact"></b-form-input>
              <b-input-group-append>
                <b-button variant="outline-info" @click="fkByMail" v-b-modal.modal-1>提交</b-button>
              </b-input-group-append>
            </b-input-group>
          </b-card>
          <descr-title title-name="联系站长" img-url="contact.png"></descr-title>
          <b-card no-body header="微信公众号" header-tag="header" bg-variant="white" header-text-variant="dark">
            <b-row no-gutters class="text-center">
              <b-col md="6">
                <b-card-img :src="opwechatimg" alt="微信公众号" class="p-1 gzhkz"></b-card-img>
              </b-col>
              <b-col md="6">
                <b-card-body title="微信扫描关注公众号">
                  <b-card-text>
                    公众号文章涉及：<br/>
                    科学上网、网站开发<br/>
                    软件开发、破解<br/>
                    java、python、php、Android、服务器、spring……<br/>
                  </b-card-text>
                </b-card-body>
              </b-col>
            </b-row>
          </b-card>
          <b-card header="微博/QQ" header-tag="header" bg-variant="white" id="topmt" header-text-variant="dark"
                  body-class="text-center">
            <b-img :src="weiboimg" class="wbimgkz"></b-img>
            <b-img :src="qqimg" class="qqimgkz"></b-img>
          </b-card>
          <descr-title title-name="友情链接" img-url="yl.png"></descr-title>
          <b-container class="fricontainer">
            <b-button class="m-1" size="sm" v-for="(item, i) in friUrls" :key="i" :href="item.url">{{item.title}}
            </b-button>
          </b-container>
        </b-col>
      </b-row>
    </b-container>
    <copy-info></copy-info>
  </div>
</template>
<script>
import { WOW } from 'wowjs'

export default {
  name: 'app',
  data () {
    return {
      logo: '',
      fkimg: require('../assets/img/fk.png'),
      opwechatimg: require('../assets/img/qrcode.jpg'),
      weiboimg: require('../assets/img/weibo.png'),
      qqimg: require('../assets/img/qqh.jpg'),
      cid1data: {},
      cid2data: {},
      cid3data: {},
      cid4data: {},
      cid5data: {},
      introdata: {},
      friUrls: {},
      adList: {},
      slide: 0,
      alertTitle: '',
      alertContent: '',
      keyword: '',
      fkData: {
        content: '',
        contact: ''
      }
    }
  },
  created () {
    // const loading = this.$loading({
    //   lock: true,
    //   text: '页面渲染中，请稍候',
    //   spinner: 'el-icon-loading',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // })
    // setTimeout(() => {
    //   loading.close()
    // }, 2000)
    this.getArsByCid1(1)
    this.getArsByCid2(2)
    this.getArsByCid3(3)
    this.getArsByCid4(4)
    this.getArsByCid5(5)
    this.getIntroAr(10)
    this.getAd()
    this.getFriUrl()
    this.getTitleImg()
  },
  methods: {
    getArsByCid1: async function (cid) {
      const rst = await this.axios.get('getArsByCid/' + cid)
      this.cid1data = JSON.parse(rst.data.data)
    },
    getArsByCid2: async function (cid) {
      const rst = await this.axios.get('getArsByCid/' + cid)
      this.cid2data = JSON.parse(rst.data.data)
    },
    getArsByCid3: async function (cid) {
      const rst = await this.axios.get('getArsByCid/' + cid)
      this.cid3data = JSON.parse(rst.data.data)
    },
    getArsByCid4: async function (cid) {
      const rst = await this.axios.get('getArsByCid/' + cid)
      this.cid4data = JSON.parse(rst.data.data)
    },
    getArsByCid5: async function (cid) {
      const rst = await this.axios.get('getArsByCid/' + cid)
      this.cid5data = JSON.parse(rst.data.data)
    },
    getIntroAr: async function (num) {
      const rst = await this.axios.get('getIntroAr/' + num)
      this.introdata = JSON.parse(rst.data.data)
    },
    getFriUrl: async function () {
      const rst = await this.axios.get('getFriUrl/')
      this.friUrls = JSON.parse(rst.data.data)
    },
    getAd: async function () {
      const rst = await this.axios.get('getAd/')
      this.adList = JSON.parse(rst.data.data)
    },
    onSlideStart (slide) {
      this.sliding = true
    },
    onSlideEnd (slide) {
      this.sliding = false
    },
    getTitleImg: async function () {
      const rst = await this.axios.get('getWebSetting/logoTitleImg')
      this.logo = rst.data.data
    },
    showQQ: function () {
      this.alertTitle = 'QQ'
      this.alertContent = 'QQ2897406734 有任何问题都欢迎咨询'
    },
    toSearch: function () {
      this.$router.push({
        name: 'search',
        params: {
          keyword: this.keyword
        }
      })
    },
    fkByMail: function () {
      this.alertTitle = '提示'
      this.alertContent = '反馈成功，感谢您的反馈'
      this.axios.post('fkByMail', this.fkData)
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 在dom渲染完后,再执行动画
      const wow = new WOW({
        live: false
      })
      wow.init()
    })
  }
}
</script>

<style>

  body {
    background-color: whitesmoke;
  }

  @media (max-width: 576px) {
    body {
      font-size: 0.85em;
    }
  }

  .logoheader {
    background-color: #212d3f;
    border-radius: 0;
    margin: 0;
    padding: 10px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  h1 {
    font-size: 1em;
    color: #0059b3;
    text-shadow: 2px 1px 1px rgb(85, 85, 87);
  }

  h2 {
    font-size: 1.3em;
    text-shadow: 4px 3px 2px rgba(160, 150, 255, 0.87);
  }

  h3 {
    font-size: 1.2em;
    text-shadow: 2px 1px 1px rgba(130, 136, 127, 0.867);
  }

  h5 {
    font-size: 1.1em;
    text-shadow: 2px 1px 1px rgba(130, 136, 127, 0.867);
  }

  h4 {
    font-size: 1em;
    text-shadow: 2px 1px 1px rgba(130, 136, 127, 0.867);
  }

  .titleimg {
    width: 45px;
    padding: 10px;
    transform: translateY(-2px);
  }

  .logo {
    width: 120px;
    padding: 5px;
  }

  .avatartop {
    transform: translateY(-3px);
  }

  .btn-group-sm > .btn, .btn-sm {
    font-size: 0.8em;
  }

  .titleimgkz {
    width: 45px;
    padding: 10px 10px;
  }

  .titlefkimgkz {
    width: 20px;
  }

  .fricontainer {
    min-height: 80px;
    background-color: white;
    border-radius: 5px;
    line-height: 70px;
    text-align: left;
  }

  .wbimgkz {
    width: 100px;
    padding: 5px;
  }

  .qqimgkz {
    width: 300px;
    padding: 5px;
  }

  .gzhkz {
    width: 230px;
  }

  #topmt {
    margin-top: 5px;
  }

  .el-card__body {
    padding: 10px !important;
  }

  .el-card__header {
    padding: 5px 10px !important;
  }

  button.el-button.el-button--text {
    padding-top: 6px !important;
  }
  .nav-link:hover{
    -webkit-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
    color: #5298ff !important;
  }
  .hoverAni:hover{
    transform: rotate(720deg) !important;
    -webkit-transform: rotate(720deg) !important;
  }
</style>
